<template>
  <div id="adminList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords"
              placeholder="搜索管理员账号或真实姓名"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索</el-button>
    <el-button @click="addFormVisible=true" style="margin-left: 10px" type="primary" icon="el-icon-plus" size="small">添加管理员</el-button>
    <el-dialog title="添加管理员" center :visible.sync="addFormVisible" width="40%" :close-on-click-modal="false"
               @closed="close()" :lock-scroll="false">
      <el-form :model="adminForm" ref="adminForm" :rules="rules">
        <el-form-item label="管理员账号" :label-width="formLabelWidth" prop="adminName">
          <el-input v-model="adminForm.adminName" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="管理员密码"  :label-width="formLabelWidth" prop="password">
          <el-input v-model="adminForm.password"  show-password autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
          <el-input v-model="adminForm.realName" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
          <el-input v-model="adminForm.tel" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="级别" :label-width="formLabelWidth" prop="level">
          <el-select v-model="adminForm.level" placeholder="请选择管理员级别">
            <el-option label="一级管理员" value="1"></el-option>
            <el-option label="二级管理员" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addAdminForm" style="width:20%">添 加</el-button>
      </div>
    </el-dialog>
    <el-table
        height="536"
        :data="adminList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="管理员账号"
          prop="adminName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="真实姓名"
          align="center"
          prop="realName"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="手机号"
          align="center"
          prop="tel"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="管理员级别"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.level == 1 ? '一级管理员' : '二级管理员' }}
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          align="center"
          width="70%"
          show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.state == 1 ? '启用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column
          label="注册时间"
          prop="createTime"
          sortable
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
      width="300%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="详细信息" placement="top" >
            <el-button  size="mini" @click="adminInfo(scope.row.adminId)" type="success" class="iconfont icon-xiangqing"/>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="启用" placement="top" >
            <el-button v-show="scope.row.state == 0" @click="disableHandle(scope.row.adminId,scope.row.adminName,scope.row.state)" type="warning" size="mini" class="iconfont icon-disableUser">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="禁用" placement="top" >
            <el-button v-show="scope.row.state == 1" @click="disableHandle(scope.row.adminId,scope.row.adminName,scope.row.state)" type="success" size="mini" class="iconfont icon-qiyongyonghu">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="重置密码" placement="top" >
            <el-button @click="resetPassword(scope.row.adminName)" class="iconfont icon-zhongzhimima" size="mini" type="danger"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top" >
            <el-button @click="deleteHandle(scope.row.adminId,scope.row.adminName)"  size="mini" icon="el-icon-delete" type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="管理员信息" :visible.sync="dialogTableVisible">
      <el-descriptions class="margin-top" :column="3"  border>
        <el-descriptions-item label="管理员账号">{{ this.admin.adminName }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ this.admin.realName }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.admin.tel }}</el-descriptions-item>
        <el-descriptions-item label="管理员级别">{{this.admin.level}}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.admin.state == 1 ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{this.admin.sex}}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{this.admin.birthday}}</el-descriptions-item>
        <el-descriptions-item label="地址">{{this.admin.address}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{this.admin.email}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
      <el-pagination
          background
          layout="total,prev, pager, next"
          :total="total"
          align="center"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :hide-on-single-page="value"
          style="padding-top: 15px"
      >
      </el-pagination>
  </div>
</template>

<script>
import {addAdmin, delAdmin, enableDisable, getAdminList, resetPwd} from "../../network/admin";

export default {
  name: "AdminList",
  data() {
    return {
      adminList: [],
      loading:true,
      keywords: '',
      value: false,
      currentPage: 1,
      total: 1,
      pageSize: 9,
      addFormVisible: false,
      adminForm: {
        adminName: '',
        password: '',
        realName: '',
        tel: '',
        level: '',
      },
      rules: {
        adminName: [{required: true, message: '请输入账号名', trigger: 'blur'},{max:15,message: '账号最大长度为15',trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        realName: [{required: true, message: '请输入真实姓名', trigger: 'blur'}],
        tel: [{required: true, message: '请输入手机号', trigger: 'blur'}, {
          pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }],
        level: [{required: true, message: '请输选择管理员级别', trigger: 'blur'}],
      },
      formLabelWidth: '100px',
      admin:{},
      dialogTableVisible:false,
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    handleCurrentChange(currentPage) {
      getAdminList(this.keywords, currentPage, this.pageSize).then(res => {
          this.loading=false;
          this.total = res.data.data.total;
          this.adminList = res.data.data.list;
          this.currentPage = currentPage;
      })
    },
    searchHandle() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    deleteHandle(adminId, adminName) {
      this.$confirm('你确定要删除账号"' + adminName + '"吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (adminName == 'admin') {
          this.$message.warning("admin账号不能删除");
        } else {
          delAdmin(adminId).then(res => {
            this.$message.success('账号'+adminName+res.data.data);
            this.handleCurrentChange(this.currentPage)
          }).catch()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    disableHandle(adminId, adminName,state) {
      if (adminName == 'admin') {
        this.$message.warning("admin账号不能禁用");
      } else {
        enableDisable(adminId).then(res => {
          console.log(state)
          if(res.data.code==100){
            this.$message.success('账号'+adminName+(state==1?'禁用':'启用')+'成功');
          }
          this.handleCurrentChange(this.currentPage)
        }).catch()
      }
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    addAdminForm() {
      this.$refs.adminForm.validate((valid) => {
        if (valid) {
          this.$confirm('请确认添加新的管理员！', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            addAdmin(this.adminForm).then(res => {
              this.$message.success(res.data.data);
              this.handleCurrentChange(this.currentPage)
            }).catch();
            this.addFormVisible = false;

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
            this.addFormVisible = false;
          });
        }
      })
    },
    close() {
      this.$refs.adminForm.resetFields();
    },
    resetPassword(adminName){
      let message = '重置后密码为：123456';
      if(adminName=='admin'){
        message = '重置后密码为：admin';
      }
      this.$confirm('你确定要重置账号"'+adminName+'"的密码吗？'+message, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resetPwd(adminName).then(res => {
          this.$message.success('账号'+adminName+'密码'+res.data.data);
        }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
        this.addFormVisible = false;
      });
    },
    adminInfo(adminId){
      this.admin=this.adminList.find((admin) => admin.adminId == adminId);
      this.dialogTableVisible=true;
    }
  }
}

</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}
</style>